<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- <template> -->
        <div class="row">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col>
              <el-form ref="valueForm" :inline="true">
                <el-form-item size="small" label="学科名称">
                  <el-input v-model="input" size="small" style="width: 190px"></el-input>
                </el-form-item>
                <el-form-item size="small">
                  <el-button @click="closeDel">清除</el-button>
                  <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <!-- 添加 -->
            <el-col style="text-align: right" :span="6">
              <el-button @click="showdia('add')" size="small" icon="el-icon-edit" type="success">新增项目</el-button>
            </el-col>
          </el-row>
        </div>
        <template>
          <el-alert
            :closable="false"
            :title='`数据一共${count}条`'
            type="info"
            show-icon
          >
          </el-alert>
        </template>
        <!-- </template> -->
        <!-- 表单 -->
        <div class="table">
          <el-table :data="list" style="width: 100%">
            <el-table-column width="48" label="序号" type="index">
            </el-table-column>
            <el-table-column width="143" prop="subjectName" label="学科名称">
            </el-table-column>
            <el-table-column width="140" prop="username" label="创建者">
            </el-table-column>
            <el-table-column :formatter="date" width="160" prop="addDate" label="创建日期">

            </el-table-column>
            <el-table-column  width="130" prop="isFrontDisplay" label="前台是否显示">
              <template #default="{ row }">
                <span>{{ row.isFrontDisplay === 1 ? "是" : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column width="130" prop="twoLevelDirectory" label="二级目录">
            </el-table-column>
            <el-table-column width="130" prop="tags" label="标签">
            </el-table-column>
            <el-table-column width="130" prop="totals" label="题目数量">
            </el-table-column>
            <el-table-column width="240" label="操作">
              <template #default="{ row }">
              <el-button type="text" @click="classify(row)">学科分类</el-button>
              <el-button type="text" @click="directory(row)">学科标签</el-button>
              <el-button type="text" @click="showdia('revise',row)">修改</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 页码 -->
        <el-pagination
          v-if="list.length"
          style="margin-top: 20px; text-align: right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="10"
          :page-sizes="[5, 10, 20, 50]"
          layout="prev, pager, next,sizes, jumper"
          :total='count'
        >
        </el-pagination>
      </el-card>
      <!-- 显示框 -->
      <el-dialog @close="close" :title="drawerTitle" :visible.sync="showDialog" width="400px">
        <el-form ref="nameForm" :model="nameForm" :rules="rulesForm">
          <el-form-item prop="subjectName" label="学科名称">
            <el-input v-model.trim="nameForm.subjectName" style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item prop="isFrontDisplay" label="是否显示">
            <el-switch @change="switchChange" v-model="nameForm.isFrontDisplay" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button @click="btnOK(drawerTitle)" type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { list, add, remove, update, detail } from '@/api/hmmm/subjects.js'
import { parseTime } from '@/utils/index'
// add

export default {
  data () {
    return {
      nameForm: {
        subjectName: '',
        isFrontDisplay: 0, // 前台显示
        id: null
      },
      rulesForm: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      count: 0, // 总条数
      page: 1, // 当前页数
      pagesize: 10, // 页尺寸
      showDialog: false, // 显示弹框
      input: '', // 搜索框
      addDate: new Date(),
      list: [], // 列表
      drawertype: 'add',
      twoLevelDirectory: '0',
      tags: '0',
      totals: 0
    }
  },
  created () {
    this.listData()
    this.switchChange()
  },
  computed: {
    // 弹框标题
    drawerTitle () {
      let title = ''
      if (this.drawertype === 'add') title = '添加'
      if (this.drawertype === 'revise') title = '修改'
      return title
    }
  },
  methods: {
    // 清除搜索框
    closeDel () {
      this.input = ''
      this.listData()
    },
    // 搜索
    async search () {
      this.$message.success('搜索成功')
      const { data } = await list({ page: this.page, pagesize: this.pagesize, subjectName: this.input })
      this.count = data.counts
      this.list = data.items
    },
    // 初始化渲染
    async listData () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      this.count = data.counts
      this.list = data.items
    },
    // 添加&&修改
    async btnOK (title) {
      if (title === '添加') {
        this.$refs.nameForm.validate(async isOK => {
          if (isOK) {
            await add(this.nameForm)
            this.listData()
            this.$message.success('添加成功')
          }
          this.showDialog = false
        })
      }
      if (title === '修改') {
        await update(this.nameForm)
        this.listData()
        this.$message.success('修改成功')
        this.close()
      }
    },
    // 删除
    async del (row) {
      await remove(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.totals > 0) {
          this.$message.warning('当前题目有数量不能删除')
        } else {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.listData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 显示弹框
    async showdia (type, row) {
      this.drawertype = type
      this.showDialog = true

      if (type !== 'add') {
        // 回显
        const res = await detail(row)
        this.nameForm.id = row.id
        if (this.nameForm.id) {
          this.nameForm = res.data
        }
      }
    },
    // 关闭弹框
    close () {
      this.$refs.nameForm.resetFields()
      this.showDialog = false
    },
    // 开关
    switchChange () {
      return this.nameForm.isFrontDisplay ? 1 : 0
    },
    // 每页多少条
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.listData()
    },
    // 当前页
    handleCurrentChange (val) {
      this.page = val
      this.listData()
    },
    // 时间
    date (cellValue) {
      return parseTime(cellValue.addDate)
    },
    // 目录
    classify (row) {
      this.$router.push({ path: 'directorys', query: { id: row.id } })
    },
    // 标签
    directory (row) {
      this.$router.push({ path: 'tags', query: { id: row.id } })
    }
  }
}
</script>

<style scoped>
.row-bg {
  padding: 10px 0;
  background-color: #fff;
}
</style>
